<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>好好吃商城</title>
    <link type="text/css" href="css/css.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/js.js"></script>
    <script src="js/wb.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div class="mianCont" id="app">
    <div class="top">
        <span>您好！欢迎来到好好吃商城</span>
        <span class="topRight">
    <a href="vip.html">好好吃</a>&nbsp;|
    <a href="order.html">我的订单</a>&nbsp;| 
    <a href="login.html">会员中心</a>&nbsp;|
    <a href="contact.html">联系我们</a>
   </span>
    </div><!--top/-->
    <div class="lsg">
        <h1 class="logo"><a href="index.html"><img src="img/logo.png" width="217" height="90"/></a></h1>
        <form action="#" method="get" class="subBox">
            <div class="subBoxDiv">
                <input type="text" class="subLeft" id="sub"/>
                <input type="image" id="sublert2" src="img/subimg.png" width="63" height="34" class="sub"/>
                <div class="hotWord">
                    热门搜索：
                    <a href="#">辣条</a>&nbsp;
                    <a href="#">大礼包</a> &nbsp;
                    <a href="#">手撕面包</a>&nbsp;
                    <a href="#">鸭脖</a> &nbsp;
                    <a href="#">每日坚果</a> &nbsp;
                    <a href="#">芒果干</a>&nbsp;
                </div><!--hotWord/-->
            </div><!--subBoxDiv/-->
        </form><!--subBox/-->
        <div class="gouwuche">
            <div class="gouCar">
                <img src="img/gouimg.png" width="19" height="20" style="position:relative;top:6px;"/>&nbsp;|&nbsp;
                <strong class="red">{{dod.length}}</strong>&nbsp;件&nbsp;|
                <strong class="red">￥ {{tot}}元</strong>
                <a href="order2.html">去结算</a> <img src="img/youjian.jpg" width="5" height="8"/>
            </div><!--gouCar/-->
            <div class="myChunlv">
                <a href="vip.html"><img src="img/mychunlv.jpg" width="112" height="34"/></a>
            </div><!--myChunlv/-->
        </div><!--gouwuche/-->
    </div><!--lsg/-->
    <div class="pnt">
        <div class="pntLeft">
            <h2 class="Title">所有商品分类
                <ul class="InPorNav">
                    <li><a href="product.html">镇店爆款</a>
                        <div class="chilInPorNav">
                            <a href="#" v-for="item in goods" v-if="item.type=='镇店爆款'" @click="gooou(item.id)">{{item.goodsName}}</a>
                        </div>
                    </li>
                    <li><a href="product.html">量贩专区</a>
                        <div class="chilInPorNav">
                            <a href="#" v-for="item in goods" v-if="item.type=='量贩专区'" @click="gooou(item.id)">{{item.goodsName}}</a>
                        </div><!--chilLeftNav/-->
                    </li>
                    <li><a href="product.html">坚果炒货</a>
                        <div class="chilInPorNav">
                            <a href="#" v-for="item in goods" v-if="item.type=='坚果炒货'" @click="gooou(item.id)">{{item.goodsName}}</a>
                        </div><!--chilLeftNav/-->
                    </li>
                    <li><a href="product.html">肉类卤味</a>
                        <div class="chilInPorNav" id="roulei">
                            <a href="#" v-for="item in goods" v-if="item.type=='肉类卤味'" @click="gooou(item.id)">{{item.goodsName}}</a>
                        </div><!--chilLeftNav/-->
                    </li>
                    <li><a href="product.html">干果蜜钳</a>
                        <div class="chilInPorNav">
                            <a href="#" v-for="item in goods" v-if="item.type=='干果蜜钳'" @click="gooou(item.id)">{{item.goodsName}}</a>
                        </div><!--chilLeftNav/-->
                    </li>
                    <li><a href="product.html">糕点点心</a>
                        <div class="chilInPorNav">
                            <a href="#" v-for="item in goods" v-if="item.type=='糕点点心'" @click="gooou(item.id)">{{item.goodsName}}</a>
                        </div><!--chilLeftNav/-->
                    </li>
                    <li><a href="product.html">方便素食</a>
                        <div class="chilInPorNav">
                            <a href="#" v-for="item in goods" v-if="item.type=='方便素食'" @click="gooou(item.id)">{{item.goodsName}}</a>
                        </div><!--chilLeftNav/-->
                    </li>
                    <li><a href="product.html">冲饮茶饮</a>
                        <div class="chilInPorNav">
                            <a href="#" v-for="item in goods" v-if="item.type=='冲茶茶饮'" @click="gooou(item.id)">{{item.goodsName}}</a>
                        </div><!--chilLeftNav/-->
                    </li>
                </ul><!--InPorNav/-->
            </h2>
        </div><!--pntLeft/-->
        <div class="pntRight">
            <ul class="nav">
                <li><a href="index.html">商城首页</a></li>
                <li><a href="product.html">促销中心</a></li>
                <li><a href="vip.html">会员中心</a></li>
                <li class="navCur"><a href="help.html">帮助中心</a></li>
                <div class="clears"></div>
                <div class="phone">TEL：021-12345678</div>
            </ul><!--nav/-->
        </div><!--pntRight/-->
        <div class="clears"></div>
    </div><!--pnt/-->
    <div class="positions">
        当前位置：<a href="index.html">首页</a> &gt; <a href="#" class="posCur">购物车</a>
    </div><!--positions/-->
    <div class="cont">
        <div class="carImg"><img src="img/car1.jpg" width="951" height="27"/></div>
        <table class="orderList">
            <tr>
                <th width="20"></th>
                <th width="430">商品</th>
                <th width="135">单价</th>
                <th width="135">数量</th>
                <th width="135">总金额</th>
                <th>操作</th>
            </tr>
            <div>
                <tr v-for="(item,index) in dod" v-bind:id="'favor'+index">

                    <td><input type="checkbox" checked v-bind:id="'total'+index" @click="tol(item.goodsId,index)"/></td>
                    <td>
                        <dl>
                            <dt><a href="#"><img v-bind:src="item.goodsImg" width="85" height="85"/></a></dt>
                            <dd>{{item.goodsName}}<br/><span class="red">{{item.goodsDetails}}</span></dd>
                            <div class="clears"></div>
                        </dl>
                    </td>
                    <td><strong class="red">¥&nbsp{{item.goodsPrice}}元</strong></td>
                    <td>
                        <div class="jia_jian">
                            <img src="img/jian.jpg" @click="reduce(item.goodsId)" class="jian"/>
                            <input class="shuliang" :value="item.carNum" readonly=“readonly”/>
                            <img src="img/jia.jpg" @click="add(item.goodsId)" class="jia"/>
                        </div>
                    </td>
                    <td><strong class="red">¥ {{item.goodsPrice*item.carNum}}元</strong></td>
                    <td><a @click="chakan(item.goodsId)" class="green">查看</a><br/><a @click="del(item.id,index)" class="green">删除</a></td>
                </tr>
            </div>

            <tr>
                <td colspan="6">
                    <div class="shanchu"><input type="checkbox" checked id="checkall" @click="check_all">全选</div>
                </td>

            </tr>
        </table><!--orderList/-->
        <div class="zongji">
            总计(不含运费)：<strong class="red">¥ {{tot}} 元</strong>
        </div><!--zongji/-->
        <div class="jiesuan">
            <a href="index.html" class="jie_1">继续购物&gt;&gt;</a>
            <a href="order2.html" class="jie_2"@click="close_an_account">立即结算&gt;&gt;</a>
            <div class="clears"></div>
        </div><!--jiesuan/-->

        <div class="clears"></div>
    </div><!--cont/-->
    <div class="inHelp">
        <div class="inHLeft">
            <h4>帮助中心</h4>
            <ul class="inHeList">
                <li><a href="help.html">购物指南</a></li>
                <li><a href="help.html">支付方式</a></li>
                <li><a href="help.html">售后服务</a></li>
                <li><a href="about.html">企业简介</a></li>
                <div class="clears"></div>
            </ul><!--inHeList/-->
        </div><!--inHLeft/-->
        <div class="inHLeft">
            <h4>会员服务</h4>
            <ul class="inHeList">
                <li><a href="reg.html">会员注册</a></li>
                <li><a href="login.html">会员登录</a></li>
                <li><a href="order.html">购物车</a></li>
                <li><a href="order.html">我的订单</a></li>
                <div class="clears"></div>
            </ul><!--inHeList/-->
        </div><!--inHLeft/-->
        <div class="inHRight">
            <h4>全国统一免费服务热线</h4>
            <div class="telBox">400-0000-0000</div>
            <div class="weibo">

            </div>
        </div><!--inHRight/-->
        <div class="clears"></div>
    </div><!--inHelp/-->
    <div class="footer">
        <p>
            <a href="http://www.schhc.com">进入好好吃官网</a>&nbsp;|&nbsp;
            <a href="index.html">商城首页</a>&nbsp;|&nbsp;
            <a href="product.html">促销中心</a>&nbsp;|&nbsp;
            <a href="order.html">我的订单</a>&nbsp;|&nbsp;
            <a href="https://news.sina.com.cn">新闻动态</a>&nbsp;|&nbsp;
            <a href="login.html">会员中心</a>&nbsp;|&nbsp;
            <a href="help.html">帮助中心</a>
        </p>
        <p>
            版权所有：好好吃实业有限公司 版权所有 Copyright 2010-2015 ICP备00000000号
        </p>
    </div><!--footer/-->
</div><!--mianCont/-->

<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">


    var app = new Vue({
        el: "#app",
        data: {
            goods: [],
            dod: [],
            addcar: [],
            tot: 0,
            account:[],
            account2:[]
        },
        methods: {
         close_an_account:function (){
          $.cookie('acc', app.tot, {path: '/order2.html'});
          var j=0
          for (i = 0; i < app.dod.length; i++) {
           if($("#total" + i).prop("checked") == true){
               var m=0
            m=app.dod[i].id;
               app.account[j]=m
                    j++;
            $.cookie('accounts', app.account, {path: '/order2.html'});

           }
          }



          },
            check_all(checked) {

                if ($("#checkall").prop("checked") == true) {  //如果他是选择状态
                 app.tot=0;
                    for (i = 0; i < app.dod.length; i++) {  //循环遍历每个商品checked状态

                     app.tot = app.tot + parseInt(app.dod[i].goodsPrice) * parseInt(app.dod[i].carNum)
                        if ($("#total" + i).prop("checked") == false) {
                            $("#total" + i).prop("checked",true)
                        }
                    }
                } else {
                 app.tot=0;
                    for (i = 0; i < app.dod.length; i++) {  //循环遍历每个商品checked状态
                        if ($("#total" + i).prop("checked") == true) {
                           $("#total" + i).prop("checked",false)
                        }
                    }

                }


            },
            gooou(id) {
                $.cookie('name', id, {path: '/proinfo.html'});
                $(window).attr('location', 'proinfo.html');

            },
            chakan(id) {
                $.cookie('name', id, {path: '/proinfo.html'});
                $(window).attr('location', 'proinfo.html');
            },
            del(id, index) {
                $("#favor" + index).remove()
                $.ajax({
                    url: config.CAR_DELETEBYID,
                    type: "post",
                    dataType: "json",
                    data: {
                        "goodsId": id
                    },
                    success: function (data) {
                        alert("删除成功")


                    }
                })
                for (i = 0; i < app.dod.length; i++) { //找到这个商品
                    if (app.dod[i].id == id) {
                        app.tot = app.tot - parseInt(app.dod[i].goodsPrice) * parseInt(app.dod[i].carNum)
                    }
                }

            },
            tol(goodsId, index) {


             $("#checkall").prop("checked",false)
                //console.log($("#total"+index).prop("checked"))
                if ($("#total" + index).prop("checked") == true) {
                    for (i = 0; i < app.dod.length; i++) { //找到这个商品
                        if (app.dod[i].goodsId == goodsId) {
                            app.tot = app.tot + parseInt(app.dod[i].goodsPrice) * parseInt(app.dod[i].carNum)//更新总价格
                        }
                    }
                } else {
                    for (i = 0; i < app.dod.length; i++) { //找到这个商品
                        if (app.dod[i].goodsId == goodsId) {
                            app.tot = app.tot - parseInt(app.dod[i].goodsPrice) * parseInt(app.dod[i].carNum)
                        }
                    }
                }
            },
            reduce(goodsId) {
                for (i = 0; i < app.dod.length; i++) { //找到这个商品 然后carNum减一
                    if (app.dod[i].goodsId == goodsId) {
                        if (app.dod[i].carNum == 1) {
                            return
                        } else {
                            app.dod[i].carNum--
                            app.tot = app.tot - parseInt(app.dod[i].goodsPrice)
                            //再次加入购物车
                            var data = {
                                "userId": app.dod[i].userId,
                                "userXh": app.dod[i].userXh,
                                "goodsId": app.dod[i].goodsId,
                                "carNum": -1,
                                "carPrice": app.dod[i].goodsPrice
                            }

                            $.ajax({
                                url: config.CAR_ADD,
                                type: "post",
                                dataType: "json",
                                contentType: 'application/json',
                                data: JSON.stringify(data),
                                success: function (data) {


                                }
                            })

                        }
                    }
                }
            },
            add(goodsId) {
                for (i = 0; i < app.dod.length; i++) { //找到这个商品 然后carNum加一
                    if (app.dod[i].goodsId == goodsId) {
                        app.dod[i].carNum++
                        app.tot = app.tot + parseInt(app.dod[i].goodsPrice)
                        //再次加入购物车
                        var data = {
                            "userId": app.dod[i].userId,
                            "userXh": app.dod[i].userXh,
                            "goodsId": app.dod[i].goodsId,
                            "carNum": 1,
                            "carPrice": app.dod[i].goodsPrice
                        }

                        $.ajax({
                            url: config.CAR_ADD,
                            type: "post",
                            dataType: "json",
                            contentType: 'application/json',
                            data: JSON.stringify(data),
                            success: function (data) {


                            }
                        })
                    }
                }
            }

        }
    })
    //加载页面自动执行
    $(document).ready(function () {


        //查询所有商品
        $.ajax({
            url: config.GOODS_GETALL,
            type: "post",
            dataType: "json",
            data: {},
            success: function (data) {
                app.goods = data.data
            }
        })
        name = $.cookie('name');
        //购物车查询
        $.ajax({
            url: config.CAR_GETBYXH,
            type: "post",
            dataType: "json",
            data: {
                "userXh": name

            },
            success: function (data) {
                app.dod = data.data
                for (i = 0; i < app.dod.length; i++) {
                    app.tot = app.tot + parseInt(app.dod[i].goodsPrice) * parseInt(app.dod[i].carNum)

                }
            }

        })


    })


    $('#sublert2').click(function () {

//通过ID查询商品
        $.ajax({
            url: config.GOODS_GETALL,
            type: "post",
            dataType: "json",
            data: {
                "value": $("#sub").val()
            },
            success: function (data) {


                if (data.data == "") {
                    alert("没有此商品")
                } else {
                    var id = data.data[0].id;
                    $.cookie('name', id, {path: '/proinfo.html'});
                    $(window).attr('location', 'proinfo.html');
                }
            }
        })
    })


</script>
</body>
</html>
